@import "manage-comment.scss";

$mainColor:#23a8f5;

/*---------------------------------------------
 * Util
 --------------------------------------------*/
/**tooltip**/
.tooltip-inner{
    padding:5px 12px;
    border-radius:2px;
    font-size:14px;
}

#BpButton{cursor:pointer;}

.bg-white{background-color:#fff;}

.no-padding{padding-left:0; padding-right:0}

.content{
    min-width:536px;
}

.add-projects .item .current-file{
    width:320px; 
    height:40px;
    line-height:40px;
    box-sizing: border-box;
    display:none;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    a{
        color:$mainColor;
        
        &:hover{text-decoration:underline}
    }
    
    i{
        color:red;
        margin-left:15px;
        cursor:pointer;
    }
}

.content .err{
    width:420px;
    display:block;
    padding-left:20px;
    margin-left:105px;
    color:#e75457;
    box-sizing:border-box;
}

.add-projects .err{
    position:relative;
    top:-5px;
}

.icon-wenti{
    color:#ccd1d9; 
    margin-left:12px; 
    font-size:20px;
    cursor:pointer;
    
    &:hover{color:$mainColor;}
}

.txt{
    position:relative;
    width:420px;
    height:175px;
    background-color:#f5f5f5;
    padding:15px 20px 5px 20px;
    box-sizing:border-box;
    color:#999;
    overflow:hidden;
}

#comment{
    width:420px;
    height:130px;
    padding-right:20px;
    overflow-y:scroll;
    resize:none;
    color:#333;
    border:0;
    outline:0;
    background-color:transparent;
}

.item-label{
    width:105px;
    height:40px;
    line-height:40px;
    position:relative;
    text-align:left;
    padding-left:20px;
    box-sizing:border-box;

}


.project-logo{
    position:relative;
    width:160px;
    height:160px;
    
    img{
        border:1px dashed #65686c;
        cursor:pointer;
    }
    
    #file{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        opacity:0;
        filter:alpha(opacity=0);
    }
}

.add-projects .item{
    padding-top:10px;
    padding-bottom:10px;
    color:#333;
    
    div{
        display:inline-block;
    }
    
    input{
        width:420px;
        height:40px;
        border:1px solid #f2f2f2;
        background-color:#f5f5f5;
        padding-left:20px;
        padding-right:20px;
        color:#333;
        
        &:focus{
            border-color:$mainColor;
            box-shadow:0 0 3px $mainColor;
            -webkit-box-shadow:0 0 3px $mainColor;
            -moz-box-shadow:0 0 3px $mainColor;
        }
    }
    
    .tips{
        color:$mainColor;
        width:145px;
        height:160px;
        line-height:160px;
        float:left;
        margin-left:116px;
        white-space: nowrap;
    }
    
    .red-start:after{
        display:block;
        content:"✲";
        height:40px;
        line-height:40px;
        position:absolute;
        left:0;
        top:0;
        color:red;
    }
    
}

#money,
#currency{
    width:200px;
}

.quantifier-input{ 
    position:relative;
    
    input{padding-right:60px;}
    
    .quantifier{
        display:inline-block; 
        width:39px; 
        height:38px; 
        line-height:38px;
        background-color:#ebebef;
        position:absolute; 
        right:1px; 
        top:1px;
    }
}


.upload{
    color:$mainColor;
    width:60px;
    height:40px; 
    line-height:40px; 
    margin-left:20px; 
    margin-right:20px; 
    position:relative;
    overflow:hidden;
    
}

#book{
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height:40px;   
    opacity:0;
    filter:alpha(opacity=0); 
    cursor:pointer;
}


/*-------------------------------------------
 * 标签 (tags)
 ------------------------------------------*/
.tags{
    width:420px;
    border:1px solid #f2f2f2;
    background-color:#f5f5f5;  
    padding-left:10px;
    
    span{
        display:inline-block;
        height:30px;
        line-height:30px;
        padding:0 10px;
        margin-top:5px;
        margin-right:10px;
        border-radius:4px;
        background-color:#E9F6FE;
        color:$mainColor;
        
        i{
            cursor:pointer;
            margin-left:12px;
        }
    }
}

#tag{
    width:100%; 
    border:0; 
    outline:0;
    padding-left:10px; 
    box-shadow: none;
    background-color:transparent;
}

.focus{
    border-color:$mainColor;
    box-shadow:0 0 3px $mainColor;
    -webkit-box-shadow:0 0 3px $mainColor;
    -moz-box-shadow:0 0 3px $mainColor;
}


/*--------------------------------------------
 * 上传进度条(progress bar)
 --------------------------------------------*/
.item .pmgressbar-box{
    height:40px; 
    display:none;
}

.pmgressbar{
    width:200px;
    height:16px;
    border-radius:8px;
    background-color:#f5f5f5;
    overflow:hidden;
    position:relative;
    top:12px;
    margin-right:20px;
    
    span{
        position:absolute;
        left:0;
        top:0;
        width:0;
        height:100%;
        background-color:#e10005;
    }
}

.pmgressbar-cancel{
    width:16px;
    height:16px;
    border-radius:50%;
    background-color:#ccd1d9;
    position:relative;
    top:12px;
    cursor:pointer;
    
    i{
        font-size:9px;
        font-weight: bold;
        color:#fff;
        position:relative;
        left:0;
        top:-4px;
    }
}

/*--------------------------------------------
 * 下拉选择框 (select)
 --------------------------------------------*/

.add-projects .select{
    position:relative;
    
    input:first-child{cursor:pointer;}
    
    &>i{
        position:absolute;
        top:12px;
        right:12px;
        font-size:21px;
        color:#b2b2b2;
    }
    
    .options-box{
        position:absolute;
        left:0;
        top:41px;
        width:100%;
        max-height:300px;
        overflow:auto;
        overflow-x:hidden;
        border:1px solid $mainColor;
        box-shadow:0 0 3px $mainColor;
        background-color:#fff;
        z-index:999;
        display:none;
        
        .options{
            display:block;
            height:40px;
            line-height:40px;
            cursor:pointer;
            padding-left:20px;
            padding-right:20px;
            text-align:left;
            color:#666;
            box-sizing:border-box;
            
            &:hover{
                background-color:#f4f8fb;
                color:#333;
            }
            
            i{
               display:none;
            }
        }
        
        .selected{
            background-color:#f4f8fb;
            color:#333;
            
            i{
                font-size:24px;
                color:$mainColor;
                display:block;
            }
        }
    }
}

/*-------------------------------------------
 * 取消、保存按钮 (save button and cancel button)
 -------------------------------------------*/
.btn-row{
    max-width:525px;
    margin-top:40px;
    
    a{
        display:inline-block;
        height:40px;
        line-height:40px;
        text-align:center;
        cursor:pointer;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
    }
    
    #save{
        width:140px;
        background-color:$mainColor;
        color:#fff;
        
        &:hover{
            opacity:.85;
        }
    }
    
    #cancel{
        width:100px;
        margin-right:10px;
    
        &:hover{
            background-color:#f2f2f2;
        }
    }
    
}

//图片裁剪模态框
#cutpic-modal{
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    background-color:rgba(0,0,0,.5); 
    z-index:300; 
    display:none;  
}

.cutpic-content{
    width:685px;
    padding:20px;
    background-color:#fff;
    box-sizing:border-box;
    border-radius: 4px;
    overflow: hidden;
    position:relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.preview{
    margin-left:15px;
    margin-bottom:5px;
    width:150px;
    height:150px;
    overflow:hidden;
}

.current-pic{
  width:480px;
  height:360px;
}

.current-pic-btn{
    margin-top:20px;
    margin-bottom:0;
    text-align: center;
    
    button{
        border:0;
        outline:0;
        color:#fff;
        margin-left:20px;
        margin-right:20px;
    }
    
    .save-cut-logo{
        padding:5px 15px;
        border-radius:4px;
        background-color:$mainColor;
        
        &:hover{
            background-color:#003366;
        }
    }
    
    .cancel-upload-logo{
        padding:3px 8px;
        border-radius:2px;
        color:#333;
        background-color:transparent;
        
        &:hover{
            background-color:#f1f1f1;
        }
    }
}



